import React, { Component } from "react";
import { NavBar, Carousel, Flex } from "antd-mobile";
import Searchinput from "../searchinput/searchinput";
import "./Category.css";
import myaxios from "../utils/myaxios";
export default class Category extends Component {
  state = {
    categoryies: [], //返回的菜单数据
    categories_content: [], //右边菜单渲染的内容
    select_index: 0, //当前选中左边的菜单
  };
  // 左边分类菜单点击的时候触发
  handleItemClick = (e) => {
    let select_index = e.target.getAttribute("data-index");
    this.setState({
      select_index: parseInt(select_index),
      categories_content: this.state.categoryies[select_index].children,
    });
  };
  // 右边图片点击的时候
  handleProductItemClick = (e) => {
    let cid = e.target.getAttribute("data-index");
    this.props.history.push("/goodList/" + cid);
  };
  // 获取分类菜单的数据
  getCategories = (params) => {
    myaxios
      .get("/categories")
      .then((res) => {
        this.setCategories(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  //is_storaged 代表之前一斤缓存过了
  setCategories = (res, is_storaged) => {
    // 缓存请求的数据
    let categories_cache = {};
    if (is_storaged) {
      // 直接获取本地缓存中的数据即可
      categories_cache = JSON.parse(localStorage.getItem("categories_cache"));
    } else {
      categories_cache = { date: Date.now(), categories: res };
    }
    // 缓存到本地
    localStorage.setItem("categories_cache", JSON.stringify(categories_cache));
    this.setState({
      categoryies: res,
      categories_content: res[0].children,
    });
  };

  componentDidMount() {
    // 进来的时候先判断本地缓存是否过期
    // 如果没有过期的情况下直接获取本地缓存
    let categories_cache = localStorage.getItem("categories_cache");
    // 如果本地缓存不为空
    if (categories_cache) {
      // 判断本地缓存是否过期
      let current_time = Date.now();
      let storage_time = JSON.parse(categories_cache).date;
      if (current_time - storage_time > 60 * 60 * 1000) {
        //    一小时过期
        this.getCategories();
      } else {
        //    缓存没有过期
        this.setCategories(JSON.parse(categories_cache).categories, true);
      }
    } else {
      this.getCategories();
    }
  }
  render() {
    return (
      <div className="yg-category">
        {/* 首页导航条开始 */}
        <div className="yg-category-nav">
          <NavBar className="yg-category-nav-title">商城分类</NavBar>
        </div>
        {/* 首页导航条结束 */}
        {/* 首页搜索框开始 */}
        <div className="yg-category-search">
          <Searchinput></Searchinput>
        </div>
        {/* 首页搜索框结束 */}
        {/* 分类菜单开始 */}
        <div className="yg-category-content">
          {/* 利用冒泡机制处理事件*/}
          <div className="category-content-left" onClick={this.handleItemClick}>
            {this.state.categoryies.map((v, index) => {
              return (
                <div
                  data-index={index}
                  className={
                    this.state.select_index === index
                      ? "active content-left-item"
                      : "content-left-item"
                  }
                  key={v.cat_id}
                >
                  {v.cat_name}
                </div>
              );
            })}
          </div>

          <div className="category-content-right">
            {this.state.categories_content.map((v, i) => {
              return (
                <div className="content-right-item" key={v.cat_id}>
                  {/* 二级菜单标题开始 */}
                  <div className="right-item title">
                    {"/"}
                    {v.cat_name}
                    {"/"}
                  </div>
                  {/* 二级菜单标题结束 */}
                  {/* 产品列表开始 */}
                  <div
                    className="product-List"
                    onClick={this.handleProductItemClick}
                  >
                    {v.children &&
                      v.children.map((v) => {
                        return (
                          <div
                            key={v.cat_id}
                            className="product-List-item"
                            data-index={v.cat_id}
                          >
                            <div className="imageWrapper">
                              <img
                                src={v.cat_icon}
                                alt=""
                                data-index={v.cat_id}
                              />
                            </div>
                            <div className="item-title">{v.cat_name}</div>
                          </div>
                        );
                      })}
                  </div>
                  {/* 产品列表结束 */}
                </div>
              );
            })}
          </div>
        </div>
        {/* 分类菜单结束 */}
      </div>
    );
  }
}
